<!--
 * @Author: coocase
 * @Date: 2021-03-13 18:24:27
 * @LastEditTime: 2021-06-11 12:20:59
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\components\search.vue
-->
<template>
  <div class="search-wrap">
    <Row class="search-row">
      <Col span="8" class="search-left">
        <Icon
          class="search-logo"
          type="md-basket"
          color="#ff1268"
          size="100"
          @click="goTo"
        />
        <Dropdown class="search-drop" trigger="click" style="margin-left: 20px">
          <a href="javascript:void(0)">
            北京
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem>上海</DropdownItem>
            <DropdownItem>广州</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Col>
      <Col span="16">
        <Input
          class="search"
          search
          enter-button="搜索"
          size="large"
          placeholder="Enter something..."
          @on-search="goSearch(words)"
          v-model="words"
        />
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      words: "",
      path: "/result",
    };
  },
  beforeCreate: function () {
    var timer = setInterval(() => {
      if (document.readyState == "complete") {
        this.$Spin.hide();
        clearInterval(timer);
      }
    }, 100);
  },
  created: function () {},
  mounted: function () {},
  beforeUpdate: function () {},
  updated: function () {},
  methods: {
    goSearch: function (words) {
      console.log(words);
      if (words == "") {
        this.$Notice.warning({
          title: "请输入搜索内容",
          duration: 2,
        });
        return;
      }
      localStorage.setItem("searchVal", words);
      this.$router.push({ name: "Result" });
    },
    goTo: function () {
      var path = this.$route.path;
      //当路径不是根目录，且不包含index时才跳转主页
      if (path != "/" && path.search("index") == -1) {
        this.$router.push({ name: "Index" });
      }
    },
    getResults: function (str) {
      this.$http
        .getRequest({
          api: "results",
          data: { str },
        })
        .then((res) => {
          this.$emit("getResults", res);
          //获取数据再跳转，否则第一次渲染不出数据
          this.$Notice.success({
            title: "搜索成功",
            duration: 0.75,
          });
          //传入w值为str的参数
          this.$router.push({ name: "ResultTo", params: { w: str } });
          //   console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goResult: function () {
      var words = this.words;
      this.path = "/result/" + words;
      // console.log(words);
      // console.log(this.path);
      // console.log(this.$route.path);
      // 当前搜索词和 将要搜索的词做对比，一样则不跳转
      if (words == "") {
        this.$Notice.warning({
          title: "不能为空",
          duration: 2,
        });
      } else if (this.path != this.$route.path) {
        this.getResults(words);
      } else {
        this.$Notice.warning({
          title: "已经在这个页面了",
          duration: 2,
        });
      }
    },
  },
};
</script>

<style scoped]>
.search-wrap {
  margin: 20px 0;
}
.search-wrap .search-left {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-right: 150px;
}
.search-row {
  display: flex;
  justify-content: space-between;
}
.search {
  display: inline-block;
  width: 700px;
  margin: 20px 0 64px;
}
.ivu-input-group .ivu-input {
  width: 80%;
  border-color: #ff1268;
}
.search-drop {
  align-self: flex-start;
  margin-top: 20px;
  font-size: 16px;
}
.search-logo:hover {
  cursor: pointer;
}
</style>